<template>  
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="6">
            <h3 class="box-title" style="line-height: 40px;">
              湖北省高校项目评审一览
            </h3>
          </el-col>
          <el-col :span="12">
            <!-- 搜索 -->
            <div style="line-height: 40px;float: left; margin-left: 15px;">
              <el-form :model="searchData">
                <el-date-picker
                style="width: 20%;"
                v-model="searchData.year"
                type="year"

                value-format="yyyy"
                placeholder="项目年份"
              ></el-date-picker>
                <el-input
                  v-model="searchData.name"
                  placeholder="姓名"
                  clearable
                  style="width: 20%; margin:auto 5px;"
                ></el-input>
                <!-- <el-input
                  v-model="searchData.sch"
                  placeholder="学校"
                  clearable
                  style="width: 20%;margin:auto 5px;"
                >  
                </el-input> -->
                 <el-select
                  style="width: 24%;"
                  v-model="searchData.sch"
                  filterable
                  clearable
                  placeholder="学校"
                >
                  <el-option
                    v-for="item in selectSch"
                    :key="item.value"
                    :label="item.sch_name"
                    :value="item.sch_id"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="searchData.title"
                  placeholder="项目名称"
                  show-word-limit
                  clearable
                  style="width: 20%;margin:auto 5px;"
                ></el-input>
              </el-form>
            </div>
          </el-col>
          <el-col :span="2">
            <!-- <div style="line-height: 40px;float: left;"> -->
            <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button>
            <!-- </div> -->
          </el-col>
          <el-col :span="2">
              <el-button class="btn-link-large add-btn" style="background-color:#2980D9;" @click="exportExcel()">
              <i class="el-icon-download el-icon--right"> 导出</i>
            </el-button>
          </el-col>
        </div>
        <div class="box-body">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="姓名"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="sch"
              label="学校"
              :formatter="showSch"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="pro_no"
              show-overflow-tooltip
              label="项目编号">
            </el-table-column>>
               <el-table-column
              prop="title"
              show-overflow-tooltip
              label="项目名">
            </el-table-column>
             <el-table-column
              prop="type"
              label="项目类型"
              show-overflow-tooltip
              :formatter="showName">
            </el-table-column>
            <el-table-column
              prop="year"
              label="项目年份">
            </el-table-column>
            <el-table-column prop="status" label="立项状态">
              <template scope="scope">
                <el-tag
                  type="danger"
                  v-if="scope.row.status < 10"
                  close-transition
                  >未立项</el-tag
                >
                <el-tag
                  type="success"
                  v-if="scope.row.status >=10"
                  close-transition
                  >已立项</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="立项评审"
              prop="evaluate">
                <template slot-scope="scope">
                  <el-button @click="toogleExpand(scope.row)">详情</el-button>
               <!--  <i class="iconfont icon-tubiaozhizuomoban" @click="toogleExpand(scope.row)">详情</i> -->
                  <el-dialog
                  title="立项专家评审详情"
                  :visible.sync="evaButton"
                  style="width:60%;"
                  center
                >
                    <el-table 
                    :data="table1" 
                    border
                  show-summary 
                  :summary-method="getSummaries"
                  >
                      <el-table-column
                        property="name"
                        label="评审人"
                      ></el-table-column>
                      <el-table-column
                        property="evaluate"
                        label="分数"
                      ></el-table-column>
                    </el-table>
                     
                  </el-dialog>
                  </template>
               <!--  <el-button @click="evaButton = true">详情</el-button> -->
              </el-table-column>
              <el-table-column prop="status" label="结项状态" width="120">
              <template scope="scope">
                <el-tag
                  type="danger"
                  v-if="scope.row.status < 22"
                  close-transition
                  >未结题</el-tag
                >
                <el-tag
                  type="success"
                  width="80"
                  v-if="scope.row.status == 22 &&scope.row.grade== 0"
                  close-transition
                  >已结题</el-tag
                >
                <el-tag
                  type="success"
                  width="80"
                  v-if="scope.row.status == 22 &&scope.row.grade == 1"
                  close-transition
                  >优秀</el-tag
                >
                <el-tag
                  type="success"
                  width="80"
                  v-if="scope.row.status == 22 &&scope.row.grade == 2"
                  close-transition
                  >合格</el-tag
                >  <el-tag
                  type="danger"
                  v-if="scope.row.status == 23 &&scope.row.grade == 3"
                  close-transition
                  >不合格</el-tag
                >
              </template>
            </el-table-column>
              <el-table-column
                label="结项评审"
                prop="exevaluate">
                <template slot-scope="scope">
                  <el-button @click="detail(scope.row)">详情</el-button> 
                  <el-dialog
                    title="结项专家评审详情"
                    :visible.sync="exeButton"
                    style="width:60%;"
                    center
                  >
                    <el-table 
                    :data="table2" 
                    border
                  show-summary 
                  :summary-method="getSummaries">
                      <el-table-column
                        property="name"
                        label="评审人"
                      ></el-table-column>
                      <el-table-column
                        property="evaluate"
                        label="分数"
                      ></el-table-column>
                    </el-table>
                      
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
             <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              layout="prev, pager, next"
              :page-count="total"
              style="float: right;"
            ></el-pagination>
          </div>
        </div>
      </el-col> 
    </div>
  </div>
</el-row>
</template>

<script>
import http from './../../../assets/js/http.js'
export default {
  data() {
    return {
      userInfo: Lockr.get('userInfo'),
      schInfo: Lockr.get('schInfo'),
      selectSch: Lockr.get('schsInfo'),
      evaButton: false,
      exeButton: false,
      table1: [],  //立项评审
      table2: [],  //结项评审
      tableData: [], //其他信息
      tableData1: [],   //导出表格的信息
      currentPage: 1,
      total: 1,
      searchData:{},  //搜索条件
      options: []
    }
  },
  methods: { 
    showSch(row) {
      return this.schInfo['sch_id_' + row.sch]['sch_name']
     },
     showName(row) {
       console.log(this.options[0])
      if(row.parent === this.options[0].id){ //14 实践育人
        let pname = this.options[0].title
        let cname 
        this.options[0].children.forEach(element =>{
          if(row.children === element.id){
            cname = element.title
          }
        })
        return pname + ' / ' + cname
      }else {    //15 学工精品
        let pname = this.options[1].title
        let cname 
        this.options[1].children.forEach(element =>{
          if(row.children === element.id){
            cname = element.title
          }
        })
        return pname + ' / ' + cname  
      }
     },
    getList(data){
      // console.log(data)
      this.apiPost('admin/Report/ProjectendList',data).then(res => {
        this.handelResponse(res, data => {
           console.log(res.data.data)
          this.total = Math.ceil(data.total / data.per_page)
          this.tableData = res.data.data
          // console.log(this.tableData)
         })
    })
  },
   // 表格总计的时间
    getSummaries(param) {
        const { columns, data } = param;
        // console.log(param)
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '平均分';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          // console.log(values)

           if (!values.every(value => isNaN(value))) {
             sums[index] = values.reduce((prev, curr) => {

              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return  prev;
              }
            }, 0);
              console.log(values.length)
             if(values.length > 0){
              sums[index] =  sums[index]/(values.length)
             };
          } else {
            sums[index] = '无';
          }
        });

        return sums;
      },

  toogleExpand(row) {
    // console.log(row)
    this.evaButton = true
    this.table1 = row.evaluate
  },
  detail(row) {
     console.log(row)
    this.exeButton = true
    this.table2 = row.exevaluate 
  },
  handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      let data = {
        page: this.currentPage
      }
      this.getList(data)
    },
    Search() {
      let data = {
        name: this.searchData.name,
        year: this.searchData.year,
        sch: this.searchData.sch,
        title: this.searchData.title
      }
      // console.log(data)
      this.getList(data)
      this.getTable(data)
    },
    //获取options
    init() {
      this.apiPost('admin/Report/DropdowmList').then((res) =>{
        this.handelResponse(res,data =>{
          // console.log(res.data)
          this.options = res.data.type
          // console.log(this.options)
        })
      })
    },
    //获取导出表格信息
    getTable(data) {
      // console.log(this.options)
      this.apiPost('admin/Report/ListDown',data).then((res) =>{
        this.handelResponse(res,data =>{
          console.log(res.data)
          this.tableData1 = []
          res.data.forEach(element =>{
            let type
            type = this.showName(element);
            // console.log(type)
            let stproject_status
            if(element.status < 22){
              stproject_status = "未结题";
            }else if(element.status == 22&&element.grade == 0){
              stproject_status = "已结题";
            }else if(element.status == 22&&element.grade == 1){
              stproject_status = "优秀";
            }else if(element.status == 22&&element.grade == 2){
              stproject_status = "合格";
            }else{
              stproject_status = "不合格";
            }
            this.tableData1.push({
                name: element.name,
                sch: this.schInfo['sch_id_' + element.sch]['sch_name'],
                type: type,
                pro_no:element.pro_no,
                title:element.title,
                year:element.year,
                reproject_status: element.status>=10?"已立项":"未立项",
                stproject_status: stproject_status,
                evaluate_average: element.evaluate_average,
                exevaluate_average: element.exevaluate_average
            })
          })
           console.log(this.tableData1)
        })
      })
    },
    exportExcel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel} = require('../../../excel/export2Excel') 
        const tHeader = [ '姓名','学校','项目类型','项目编号','项目名','项目年份','立项状态','立项平均分','结项状态','结项平均分']  //项目类别无数据
        const filterVal = ['name','sch', 'type','pro_no','title', 'year', 'reproject_status','evaluate_average','stproject_status','exevaluate_average']; // 导出的表头字段名，需要导出表格字段名
         // const evaluate = ['','','','','name','evaluate']
        const list = that.tableData1;
        console.log(list)

        const data = that.formatJson(filterVal, list);
        const multiHeader = [
              [
                "项目评审一览表", "","","", "","", "", "","",""
              ]
            ];
        const merges = [
              "A1:V1"
            ]; 
        // const merges = [];
        export_json_to_excel(multiHeader,tHeader, data, '项目一览表',merges);// 导出的表格名称，根据需要自己命名
      })
    },
    formatJson(filterVal, jsonData) {
        // console.log(jsonData)
        return jsonData.map(v =>filterVal.map(j => v[j]
        
        )
      )
      
    }
 
  },

  created() {
    this.getList()
    this.init()
    // var options = []
    this.getTable()  //获取导出表格信息
    _g.closeGlobalLoading()
  },
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}</style>
